---
section: Typography
title: Text Overflow
slug: /docs/text-overflow/
---

# Text Overflow

Utilities for controlling text overflow in an element.

<carbon-ad />

| React props            | CSS Properties            |
| ---------------------- | ------------------------- |
| `textOverflow={value}` | `text-overflow: {value};` |

## Overflow Ellipsis

Use `textOverflow="ellipsis"` to truncate overflowing text with an ellipsis (`…`) if needed.

```jsx preview color=emerald
<>
  <template preview>
    <x.p
      textOverflow="ellipsis"
      overflow="hidden"
      maxWidth="xs"
      px={6}
      py={4}
      mx="auto"
      bg="emerald-200"
      color="emerald-700"
      fontWeight="medium"
      borderRadius="lg"
    >
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at
      sed dolorum ratione dolorem nisi velit cum.
    </x.p>
  </template>
  <x.p textOverflow="ellipsis" overflow="hidden">
    ...
  </x.p>
</>
```

## Overflow Clip

Use `textOverflow="clip"` to truncate the text at the limit of the content area.

```jsx preview color=light-blue
<>
  <template preview>
    <x.p
      textOverflow="clip"
      overflow="hidden"
      maxWidth="xs"
      px={6}
      py={4}
      mx="auto"
      bg="light-blue-200"
      color="light-blue-700"
      fontWeight="medium"
      borderRadius="lg"
    >
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Blanditiisitaquequodpraesentiumexplicaboincidunt? Dolores beatae nam at
      sed dolorum ratione dolorem nisi velit cum.
    </x.p>
  </template>
  <x.p textOverflow="clip" overflow="hidden">
    ...
  </x.p>
</>
```

{/* @TODO add truncate */}

## Responsive

To control the text overflow of an element at a specific breakpoint, use responsive object notation. For example, adding the property `textOverflow={{ md: "clip" }}` to an element would apply the `textOverflow="clip"` utility at medium screen sizes and above.

```jsx
<x.div textOverflow={{ md: 'clip' }}>{/* ... */}</x.div>
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
